<template>
    <el-container class="home-container">
        <el-header>
            <router-link style="text-decoration: none;" to="/home">
                <div class="logo_tile">
                    <h2>抢购系统</h2>
                </div>
            </router-link>
            <div class="logo_tile">
                <span> 欢迎：<i class="el-icon-arrow-left"></i>{{loginUser}}<i class="el-icon-arrow-right"></i> </span>
                <el-button @click="logout" type="info">退出</el-button>
            </div>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse ? '65px' : '200px'">
                <div class="toggleBar" @click="isCollapse=!isCollapse">|||</div>
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#333744"
                        text-color="#fff"
                        router
                        unique-opened
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        active-text-color="#409EFF">

                    <el-submenu  index="1-4" :class="{'el_submenu_large':!isCollapse,'el_submenu_small':isCollapse}">
                        <template slot="title">
                            <i class="el-icon-s-tools"></i>
                            <span slot="title">系统中心</span>
                        </template>
                        <el-menu-item index="addGoods" ><i class="el-icon-reading"></i>添加商品</el-menu-item>
                        <el-menu-item index="goodsList" ><i class="el-icon-phone-outline"></i>商品列表</el-menu-item>
                        <el-menu-item index="start" ><i class="el-icon-user"></i>开始活动</el-menu-item>
<!--                        <el-menu-item index="studentList" ><i class="el-icon-user-solid"></i>学生管理</el-menu-item>-->
<!--                        <el-menu-item index="subjectList" ><i class="el-icon-collection"></i>科目管理</el-menu-item>-->
<!--                        <el-menu-item index="classList" ><i class="el-icon-s-management"></i>课程管理</el-menu-item>-->
<!--                        <el-menu-item index="recordList" ><i class="el-icon-s-claim"></i>提成记录</el-menu-item>-->
<!--                        <el-menu-item index="marketList" ><i class="el-icon-s-ticket"></i>活动中心</el-menu-item>-->

                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 右侧的 主体区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
        <span style="color: gray; position: fixed; bottom: 0; right: 0;">智慧书店工作人员管理系统</span>
    </el-container>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                isCollapse:false,
                loginUser:""
            }
        },
        methods:{
            logout:function () {
                sessionStorage.removeItem("tbStaffMember");//退出之前先清除sessionStorage中user信息
                this.$router.push('/') //退出到登录页
            }
        },
        mounted() {
            //获取当前登录用户
            let user=JSON.parse(sessionStorage.getItem("user")); //=JSON.parse()字符串转json对象 ，JSON。stringify（）对象转字符串
            //alert(user.adminName)
            this.loginUser=user.userName;
        }
    }
</script>
<style lang="less" scoped>
    .home-container {
        height: 100%;
    }

    .el-header {
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        user-select: none;

    .logo_tile {
        display: flex;
        align-items: center;
        color: white;

    h2 {
        font-weight: 200;
        margin-left: 15px;
    }
    }

    .el-button {
        margin-right: 10px;
    }
    }

    .el-aside {
        background-color: #333744;
        user-select: none;
    }

    .el-main {
        background-color: #eaedf1;
    }

    .iconfont {
        margin-right: 8px;
    }

    .toggleBar {
        color: #fff;
        font-size: 12px;
        line-height: 24px;
        background-color: #4a5064;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
        user-select: none;
    }

    .el_submenu_large {
        width: 200px;
    }

    .el_submenu_small {
        width: 65px;
    }
</style>
